<template>
  <el-main>
    <el-header> 订单管理</el-header>
    <div style="margin: 0.5rem">🐆</div>
    <el-tabs type="border-card" @tab-click="handleClick">
      <el-tab-pane label="所有订单🦖">
        <el-table
          :data="
            all.filter(
              (data) =>
                !search ||
                data.name.toLowerCase().includes(search.toLowerCase())
            )
          "
        >
          <el-table-column prop="listid" label="订单编号" />
          <el-table-column prop="name" label="收货人" />
          <el-table-column prop="location" label="收货地址" />
          <el-table-column prop="tel" label="联系电话" />
          <el-table-column prop="total" label="交易金额" align="center" />
          <el-table-column label="订单状态" align="center"
            ><template #default="scope">
              {{
                scope.row.finished_at
                  ? "已完成"
                  : scope.row.shipped_at
                  ? "已发货"
                  : "待发货"
              }}
            </template></el-table-column
          >
          <el-table-column align="center">
            <template #header>
              <el-input
                v-model="search"
                size="mini"
                :suffix-icon="Search"
                placeholder="输入订单号查询订单" /></template
            ><template #default="scope">
              <el-button type="warning" @click="details(scope.row)"
                >订单详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 待发货 -->
      <el-tab-pane label="待发货🐘">
        <el-table
          :data="
            created.filter(
              (data) =>
                !search ||
                data.name.toLowerCase().includes(searchCreated.toLowerCase())
            )
          "
        >
          <el-table-column prop="listid" label="订单编号" />
          <el-table-column label="购买时间">
            <template #default="scope">{{
              dateFormat(scope.row.created_at)
            }}</template>
          </el-table-column>
          <el-table-column prop="name" label="收货人" />
          <el-table-column prop="location" label="收货地址" />
          <el-table-column prop="tel" label="联系电话" />
          <el-table-column prop="total" label="交易金额" align="center" />
          <el-table-column align="center">
            <template #header>
              <el-input
                v-model="searchCreated"
                size="mini"
                :suffix-icon="Search"
                placeholder="输入订单号查询订单"
              />
            </template>
            <template #default="scope">
              <el-button type="primary" @click="ship(scope.row)"
                >发货</el-button
              >
              <el-button type="warning" @click="details(scope.row)"
                >订单详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 已发货 -->
      <el-tab-pane label="已发货🦘">
        <el-table
          :data="
            shipped.filter(
              (data) =>
                !search ||
                data.name.toLowerCase().includes(searchShipped.toLowerCase())
            )
          "
        >
          <el-table-column prop="listid" label="订单编号" />
          <el-table-column label="发货时间">
            <template #default="scope">{{
              dateFormat(scope.row.shipped_at)
            }}</template>
          </el-table-column>
          <el-table-column prop="track" label="物流单号" />
          <el-table-column prop="name" label="收货人" />
          <el-table-column prop="location" label="收货地址" />
          <el-table-column prop="tel" label="联系电话" />
          <el-table-column prop="total" label="交易金额" align="center" />
          <el-table-column align="center">
            <template #header>
              <el-input
                v-model="searchShipped"
                size="mini"
                :suffix-icon="searchShipped"
                placeholder="输入订单号查询订单"
              />
            </template>
            <template #default="scope">
              <el-button type="warning" @click="details(scope.row)"
                >订单详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 已完成 -->
      <el-tab-pane label="已完成🦕">
        <el-table
          :data="
            finished.filter(
              (data) =>
                !search ||
                data.name.toLowerCase().includes(searchFinished.toLowerCase())
            )
          "
        >
          <el-table-column prop="listid" label="订单编号" />
          <el-table-column prop="finished_at" label="收货时间">
            <template #default="scope">{{
              dateFormat(scope.row.finished_at)
            }}</template>
          </el-table-column>
          <el-table-column prop="track" label="物流单号" />
          <el-table-column prop="name" label="收货人" />
          <el-table-column prop="location" label="收货地址" />
          <el-table-column prop="tel" label="联系电话" />
          <el-table-column prop="total" label="交易金额" align="center" />
          <el-table-column align="center">
            <template #header>
              <el-input
                v-model="searchFinished"
                size="mini"
                :suffix-icon="Search"
                placeholder="输入订单号查询订单"
              />
            </template>
            <template #default="scope">
              <el-button type="warning" @click="details(scope.row)"
                >订单详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-main>
  <el-dialog
    v-model="dialogVisible"
    title="订单详情"
    width="35%"
    :before-close="handleClose"
  >
    <el-table
      :data="detail"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="name" label="商品名称" width="180" />
      <el-table-column prop="price" label="单价" width="180" />
      <el-table-column prop="quantity" label="数量" />
    </el-table>
  </el-dialog>
</template>
<script>
import { Search } from "@element-plus/icons-vue";
import { lookIndentList, shipApi } from "@/api/admin";
import { onBeforeMount, ref } from "vue";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
export default {
  setup() {
    const dateFormat = (time) => {
      return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
    };
    const all = ref([]),
      created = ref([]),
      shipped = ref([]),
      finished = ref([]),
      detail = ref([]),
      search = ref(""),
      searchCreated = ref(""),
      searchShipped = ref(""),
      searchFinished = ref(""),
      dialogVisible = ref(false);
    // 发货
    const ship = (data) => {
      shipApi(data).then((res) => {
        if (res.data.success) {
          console.log(created.value, data);
          created.value = created.value.filter((item) => {
            return item.indent_id !== data.indent_id;
          });
          shipped.value.push(res.data);
          ElMessage.success("发货成功！");
        } else {
          ElMessage.error(`${res.data.message}`);
        }
      });
    };
    // 查看订单详情
    const details = (row) => {
      dialogVisible.value = true;
      lookIndentList(row).then((res) => {
        console.log(res.data.query);
        detail.value = res.data.query.details;
      });
    };
    const handleClick = () => {
      lookIndentList().then((res) => {
        all.value = res.data.query.all;
        created.value = res.data.query.created;
        shipped.value = res.data.query.shipped;
        finished.value = res.data.query.finished;
      });
    };
    // 显示所有管理员的信息
    onBeforeMount(() => {
      lookIndentList().then((res) => {
        all.value = res.data.query.all;
        created.value = res.data.query.created;
        shipped.value = res.data.query.shipped;
        finished.value = res.data.query.finished;
      });
    });
    return {
      search,
      searchCreated,
      searchShipped,
      searchFinished,
      Search,
      all,
      created,
      shipped,
      finished,
      ship,
      dateFormat,
      details,
      dialogVisible,
      detail,
      handleClick,
    };
  },
};
</script>
<style scoped>
.el-header {
  margin-bottom: 0.5rem;
  background-color: #fff;
  padding: 1rem;
  font-size: 2rem;
  font-weight: 900;
}
.el-main {
  background-color: #fff;
  min-height: 100vh;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.order {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding-right: 8rem;
  height: 1rem;
  padding: 1rem 0;
}
.order > li {
  border-left: 1px solid #ccc;
  padding-left: 2.5rem;
}
.up {
  background-color: rgb(235, 230, 230);
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
}
.up li {
  padding: 0 1rem;
}
.el-table__expanded-cell > p {
  padding: 0 5rem;
}
.details {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.details li {
  margin: 0 3rem;
}
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-lighter);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-lighter);
}

.el-tabs--border-card {
  border-style: none;
  box-shadow: none;
}

.el-tabs--border-card > .el-tabs__header {
  border-bottom: none;
}
</style>

<style>
@media screen and (max-width: 600px) {
  .el-dialog {
    margin: 0px;
    width: 100%;
  }
}
</style>
